﻿﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<c:set var="user" value="${sessionScope.user}"/>
<!DOCTYPE html>

<head>
    <title>产品详细页面</title>
    <script src="${path}/pet/home/js/jquery.min.js"></script>
    <!--CSS styles-->
    <link rel="stylesheet" media="all" href="${path}/pet/home/css/bootstrap.css" />
    <link rel="stylesheet" media="all" href="${path}/pet/home/css/animate.css" />
    <link rel="stylesheet" media="all" href="${path}/pet/home/css/linear-icons.css" />
    <link rel="stylesheet" media="all" href="${path}/pet/home/css/theme.css" />
    <!--JS files-->
    <script src="${path}/pet/user/js/clipboard.min.js"></script>

    <script src="https://www.jq22.com/jquery/jquery-ui-1.11.0.js"></script>
    <link rel="stylesheet" href="https://www.jq22.com/jquery/jquery-ui-1.11.0.css">

</head>

<body>
<!----------- 导航 --------------------------------------------------------------------------->
<nav class="navbar-fixed">
    <div class="container">
        <div class="navigation navigation-main">
            <!-- 在这里建立你的logo-->
            <a href="" class="logo"><img src="${path}/pet/home/assets/images/logo.jpg" alt="" /></a>
            <!-- 移动切换菜单-->
            <a href="#" class="open-menu"><i class="icon icon-menu"></i></a>
            <!-- 可转换菜单（移动/桌面）-->
            <div class="floating-menu">
                <!--移动切换菜单触发-->
                <div class="close-menu-wrapper">
                    <span class="close-menu"><i class="icon icon-cross"></i></span>
                </div>
                <ul>
                    <li id="exitlogin3"><a>退出登录</a></li>
                    <li><a href="${path}/home">首页</a></li>
                    <li><a href="${path}/chat">社交<span id="badge"></span></a></li>
                    <li><a href="${path}/chat?role=kf">客服</a></li>
                    <li><a href="${path}/myOrders">订单</a></li>
                    <li><a href="${path}/myAccount">我的</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>
<section class="main-header" style="background-image:url(${path}/pet/home/assets/images/gallery-3.jpg)">
    <header>
        <div class="container">
            <h1 class="h2 title">宠物医疗保险</h1>
        </div>
    </header>
</section>
<!-------------------- 产品 ------------------------------------------------------------------->
<section class="product">
    <div class="main" style="background-color: #FFFFFF;">
        <div class="container">
            <div class="row product-flex">
                <div class="col-md-4 col-sm-12 product-flex-info">
                    <div class="clearfix">
                        <div id="insurance"></div>
                        <div class="clearfix">
                            <div class="clearfix" id="detail-list"></div>
                            <hr />
                            <%--隐藏的优惠券信息--%>
                            <div class="info-box info-box-addto added">
                                <span><strong>优惠券</strong></span>
                                <span>
                                    <a id="coupon">优惠券</a>
                                </span>
                            </div>
                            <div class="row allocate-row" id="coupon_div1" style="display:none;border:1px solid #EFEFEF;margin-left:0px;">
                                <div>
                                    <label class="allocate_name insurance">优惠券:</label>
                                    <div class="allocate_list example" id="mycoupon"></div>
                                </div>
                            </div>

                            <div class="info-box info-box-addto">
                                <span><strong>收藏</strong></span>
                                <span>
                                    <a id="add_collection" class="add"></a>
                                </span>
                            </div>

                            <%--隐藏的链接部分--%>
                            <div class="info-box info-box-addto">
                                <span><strong>分享</strong></span>
                                <span>
                                    <a id="btn_integral">分享
                                        <span id="copy_id" style="display: none;color: #43C608;">(复制成功)</span>
                                    </a>
                                </span>
                            </div>
                            <div id="div2" style="display: none; ">
                                <div style="border: 1px solid #EFEFEF;">
                                    <input id="foo" type="text" style="width:75%;">
                                    <button id="copy" class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">复制链接</button>
                                </div>
                            </div>

                            <div class="info-box info-box-addto">
                                <span><strong>购物</strong></span>
                                <span><a id="buy_now">选择受保人和受保宠物</a></span>
                            </div>

                            <div class="row allocate-row" id="buy">
                                <div>
                                    <label class="allocate_name insurance">投保人:</label>
                                    <div class="allocate_list example" id="t_people"></div>
                                </div>
                                <div style="margin-top: 2%;">
                                    <label class="allocate_name insurance">受保人:</label>
                                    <div class="allocate_list example" id="people"></div>
                                </div>
                                <div style="margin-top: 2%;">
                                    <label class="allocate_name insurance">受保动物:</label>
                                    <div class="allocate_list example" id="animal"></div>
                                </div>
                                <button id="confirm" >确认</button>
                                <button id="addRelaitve">添加其他关联人</button>
                                <button id="addPET" >添加其他宠物</button>
                                <div id="confirm_div"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <%--产品图库--%>
                <div class="col-md-8 col-sm-12 product-flex-gallery">
                    <div id="img_pro"></div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 模态框（Modal） -->

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <div id="myModalLabel"></div>
            </div>
            <div id="modal-body" class="modal-body"></div>
            <div class="modal-footer">
                <input type="button" class="btn" name="" value="关闭" data-dismiss="modal">
                <input type="button" class="btn" name="" value="提交" id="save">
            </div>
        </div>
    </div>
</div>


<%--<button type="button" class="btn" data-dismiss="modal" style="float:right;">关闭</button>--%>
</body>
<script type="text/javascript">

    $(function(){
        var petId="";
        var insuredId="";
        var buyerId = "";
        var couponId="";
        var user="<%=session.getAttribute("user")%>";
        var uid = ${user.id};
        var itemId = ${param.id};
        var coupon = "";
        var person="";
        var pet="";
        var petorrelative = "";

        $("#save").click(function() {
            if(petorrelative == "Relative") {
                //添加自然人
                var personName = $.trim($("#personName").val());
                var idType = $.trim($("#idType").val());
                var idendity = $.trim($("#idendity").val());
                var phone = $.trim($("#phone").val());
                var email = "213153122@163.com";
                var relation = $.trim($("#relation").val());

                $.ajax({
                    type: 'POST',
                    url: '/person/addPerson',
                    dataType: "json",
                    data: {personName:personName,idType:idType,idendity:idendity,phone:phone,email:email,relation:relation,remark:""},
                    error: function () {
                        console.log("失败");
                    },
                    success: function (data) {
                        alert("添加成功");
                        person = "has";
                        if(window.location.pathname == "/productDetail"){
                            $("#myModal").modal("hide");   //关闭弹出层
                            //查询出该用户的所有关联人信息
                            $.ajax({
                                type: 'POST',
                                url: '/person/findAllPerson',
                                dataType: "json",
                                data: {uid:uid},
                                error: function () {
                                    console.log("失败");
                                },
                                success: function (result) {
                                    console.log(result);
                                    if(result.length == 0){
                                        person = "null";
                                    } else {
                                        var str = "";
                                        for(var key in result){
                                            str += '<button id="'+ result[key].id +'" class="btn-allocate btn-normal people">'+ result[key].name +'</button>';
                                        }
                                        $('#people').html(str);
                                        $('#t_people').html(str);
                                        $("#people .btn-allocate.btn-normal").click(function() {
                                            $("#people .btn-allocate.btn-normal").removeClass("active");
                                            $(this).addClass("active");
                                        });
                                        $("#people button").click(function() {
                                            insuredId = $(this).attr('id');   //获设置选中的受保人
                                        })
                                        $("#t_people .btn-allocate.btn-normal").click(function() {
                                            $("#t_people .btn-allocate.btn-normal").removeClass("active");
                                            $(this).addClass("active");
                                        });
                                        $("#t_people button").click(function() {
                                            buyerId = $(this).attr('id');   //获设置选中的投保人
                                        })
                                    }
                                }
                            });

                        } else{
                            window.location.href = '${path}/myAccount';
                        }
                    }
                });
            } else if(petorrelative == "Pet") {
                //添加“我的宠物”
                var name = $.trim($("#name").val());
                var species = $.trim($("#species").val());
                var birthday = $.trim($("#birthday").val());
                var lisence = $.trim($("#lisence").val());
                var immune = $.trim($("#immune").val());
                var chip = $.trim($("#chip").val());
                var color = $.trim($("#color").val());
                var sex = $.trim($("input[name='sex']:checked").val());
                var birthControl = $.trim($("input[name='birthControl']:checked").val());

                $.ajax({
                    type: 'POST',
                    url: '/pet/insertPet',
                    dataType: "json",
                    data: {name:name,species:species,birthday:birthday,lisence:lisence,immune:immune,color:color,sex:sex,birthControl:birthControl,chip:chip,remark:""},
                    error: function () {
                        alert("失败");
                    },
                    success: function (data) {
                        alert('添加成功！');
                        if(window.location.pathname == "/productDetail"){
                            $("#myModal").modal("hide");
                            //查询出该用户的所有宠物信息
                            $.ajax({
                                type: 'POST',
                                url: '/pet/selectPets',
                                dataType: "json",
                                data: {uid:uid},
                                error: function () {
                                    console.log("失败");
                                },
                                success: function (result) {
                                    pet = "has";
                                    if(result.length == 0){
                                        console.log("空");
                                        pet = "null";
                                    } else {
                                        var str = "";
                                        for(var key in result){
                                            str += '<button id="'+ result[key].id +'" class="btn-allocate btn-normal animal">'+ result[key].name +'</button>';
                                        }
                                        $('#animal').html(str);
                                        $("#animal .btn-allocate.btn-normal").click(function() {
                                            $("#animal .btn-allocate.btn-normal").removeClass("active");
                                            $(this).addClass("active");
                                        });
                                        $("#animal button").click(function() {
                                            petId = $(this).attr('id');   //获设置选中的宠物
                                        })
                                    }

                                }
                            });
                        } else {
                            window.location.href = '${path}/myAccount';
                        }
                    }
                });
            }
        });


        $("#addRelaitve").click(function() {
            $('.modal-body').load("${path}/addRelative");
            if(confirm('是否需要添加其他的关联人？')) {
                $('#myModalLabel').html('<h4 class="modal-title" style="font-size: 1.5em;">添加我的关联人</h4>');
                $('#myModal').modal('show');
                return true;
            }
            return false;
        });


        $("#addPET").click(function() {
            $('.modal-body').load("${path}/addPet");
            if(confirm('是否需要添加其他的宠物？')) {
                $('#myModalLabel').html('<h4 class="modal-title" style="font-size: 1.5em;">添加我的宠物</h4>');
                $('#myModal').modal('show');
                return true;
            }
            return false;
        });


       //选择受保人和受保宠物
       $("#buy_now").click(function() {
            if(person == "null"){
                petorrelative = "Relative";
                $('.modal-body').load("${path}/addRelative");
                if(confirm('该用户无受保用户，请问是否添加关联人？')) {
                    $('#myModalLabel').html('<h4 class="modal-title" style="font-size: 1.5em;">添加我的关联人</h4>');
                    $('#myModal').modal('show');
                    return true;
                }
                return false;
            } else if(pet == "null") {
                petorrelative = "Pet";
                $('.modal-body').load("${path}/addPet");
                if(confirm('该用户无受保宠物，请问是否添加是我的宠物？')) {
                    $('#myModalLabel').html('<h4 class="modal-title" style="font-size: 1.5em;">添加我的宠物</h4>');
                    $('#myModal').modal('show');
                    return true;
                }
                return false;
            } else {
                $("#buy").toggle();
            }
        });

        //判断是否收藏
        $.ajax({
            url: '/action/isCollected',
            data: {itemId:itemId},
            dataType:'json',
            type: 'POST',
            error: function () {
                console.log("失败");
            },
            success: function (result) {
                console.log(result.res);
                if(result.res == false) {
                   $("#add_collection").html("添加到收藏夹");
                } else if(result.res == true){
                    $("#add_collection").html("已收藏，点击取消收藏");
                }
            }
        });

        //添加到收藏夹
        $("#add_collection").click(function(){
            var test2 = $("#add_collection").html();
            if(test2 == "添加到收藏夹") {
                $.ajax({
                    url: '/action/addCollection',
                    data: {itemId:itemId},
                    dataType:'json',
                    type: 'POST',
                    error: function () {
                        console.log("失败");
                    },
                    success: function (result) {
                        if(result.description =="收藏失败！不存在的商品或重复的收藏请求") {
                            alert("已收藏，请勿重复收藏");
                        } else if(result.description =="收藏成功!") {
                            alert("收藏成功");
                            $("#add_collection").html("已收藏，点击取消收藏");
                        }
                        console.log(result);
                    }
                });
            } else if(test2 == "已收藏，点击取消收藏"){
                $.ajax({
                    url: '/action/removeCollection',
                    data: {itemId:itemId},
                    dataType:'json',
                    type: 'POST',
                    error: function () {
                        console.log("失败");
                    },
                    success: function (result) {
                        console.log(result);
                        if(result.description == "取消成功！") {
                            alert("已取消收藏");
                            $("#add_collection").html("添加到收藏夹");
                        }
                    }
                });
            }
        });

        //添加到浏览历史
        $.ajax({
            url: '/action/addView',
            data: {itemId:itemId},
            dataType:'json',
            type: 'POST',
            error: function () {
                console.log("失败");
            },
            success: function (result) {
                console.log(result);
            }
        });

        //退出登录
        $("#exitlogin3").click(function(){
            var username = "${user.username}";
            $.ajax({
                type: 'POST',
                url: '/user/logout',
                dataType: "json",
                data: {username:username},
                error: function () {
                    console.log("失败");
                },
                success: function (data) {
                    alert("已退出账号，如有需要，请重新登录");
                    window.location.href = '${path}/home';
                }
            });
        });

        //轮询消息
        $.ajax({
            url: '/message/longSearch',
            data: {uid:uid},
            dataType:'json',
            type: 'POST',
            success: function (result) {
                var num = result.好友请求的数目 + result.好友拒绝的数目 +result.未读消息数目;
                $("#badge").html(num);
            }
        });
        //轮询消息
        setInterval(function(){
            $.ajax({
                url: '/message/longSearch',
                data: {uid:uid},
                dataType:'json',
                type: 'POST',
                success: function (result) {
                    var num = result.好友请求的数目 + result.好友拒绝的数目 +result.未读消息数目;
                    $("#badge").html(num);
                }
            });
        }, 5000);

        //分享链接
        $("#btn_integral").click(function () {
            $.ajax({
                type: 'POST',
                url: '/credit/copy',
                dataType: "json",
                data: {uid:uid,itemId:itemId},
                success: function (result) {
                    if (result.message ) {
                        console.log(result.message);
                        $("#copy_id").hide();
                        $("#foo").attr("value",result.message);
                        $("#div2").toggle();
                    }
                    $("#copy").click(function() {
                        $("#copy_id").show();
                    });
                }
            });
        });

        //复制分享链接
        /*初始化复制功能*/
        var clipboard = new Clipboard('.btn');
        clipboard.on('success', function(e) {
            console.log(e);
        });
        clipboard.on('error', function(e) {
            console.log(e);
        });

        //查询优惠券
        $("#coupon").click(function() {
            $.ajax({
                type: 'POST',
                url: '/member/power/myCoupon',
                dataType: "json",
                data: {id: uid},
                error: function () {
                    console.log("失败");
                },
                success: function (result) {
                    if(result == null){
                        alert("暂无可使用的优惠券");
                    } else {
                        $("#coupon_div1").toggle();
                        console.log(result);
                        var str1 ="";
                        for(var key in result) {
                            str1 += '<button id="' + result[key].id + '" class="btn-allocate btn-normal animal" style="margin-bottom: 2%;">' + result[key].itemName + '</button>';
                        }
                        $('#mycoupon').html(str1);
                        $("#mycoupon .btn-allocate.btn-normal").click(function() {
                            $("#mycoupon .btn-allocate.btn-normal").removeClass("active");
                            $(this).addClass("active");
                        });
                        $("#mycoupon button").click(function() {
                            couponId = $(this).attr('id');
                        })
                    }
                }
            });
        });



        //查询出该用户的所有关联人信息
        $.ajax({
            type: 'POST',
            url: '/person/findAllPerson',
            dataType: "json",
            data: {uid:uid},
            error: function () {
                console.log("失败");
            },
            success: function (result) {
                console.log(result);
                if(result.length == 0){
                    person = "null";
                } else {
                    var str = "";
                    for(var key in result){
                        str += '<button id="'+ result[key].id +'" class="btn-allocate btn-normal people">'+ result[key].name +'</button>';
                    }
                    $('#people').html(str);
                    $('#t_people').html(str);
                    $("#people .btn-allocate.btn-normal").click(function() {
                        $("#people .btn-allocate.btn-normal").removeClass("active");
                        $(this).addClass("active");
                    });
                    $("#people button").click(function() {
                        insuredId = $(this).attr('id');   //获设置选中的受保人
                    })
                    $("#t_people .btn-allocate.btn-normal").click(function() {
                        $("#t_people .btn-allocate.btn-normal").removeClass("active");
                        $(this).addClass("active");
                    });
                    $("#t_people button").click(function() {
                        buyerId = $(this).attr('id');   //获设置选中的投保人
                    })
                }
            }
        });

        //查询出该用户的所有宠物信息
        $.ajax({
            type: 'POST',
            url: '/pet/selectPets',
            dataType: "json",
            data: {uid:uid},
            error: function () {
                console.log("失败");
            },
            success: function (result) {
                if(result.length == 0){
                    console.log("空");
                    pet = "null";
                } else {
                    var str = "";
                    for(var key in result){
                        str += '<button id="'+ result[key].id +'" class="btn-allocate btn-normal animal">'+ result[key].name +'</button>';
                    }
                    $('#animal').html(str);
                    $("#animal .btn-allocate.btn-normal").click(function() {
                        $("#animal .btn-allocate.btn-normal").removeClass("active");
                        $(this).addClass("active");
                    });
                    $("#animal button").click(function() {
                        petId = $(this).attr('id');   //获设置选中的宠物
                    })
                }

            }
        });

        //跳转到到该页，然后显示产品参数
        $.ajax({
            type: 'POST',
            url: '/item/selectById',
            data:{itemId:itemId},
            dataType : "json",
            error: function () {
                console.log("失败");
            },
            success: function (result) {
                console.log(result);
                var str ="";   //{item: {…}}
                var i=0;    //item
                for(var key in result){
                    str += '<h1 class="title">'+ result[key].itemName +'</h1>';
                    str += '<div class="info-box">';
                    str += '    <span><strong>保险名字</strong></span>';
                    str += '    <span>'+ result[key].itemName +'</span>';
                    str += '</div>';
                    str += '<div class="info-box">';
                    str += '    <span><strong>价格</strong></span>';
                    str += '    <span>'+ result[key].price +'元</span>';
                    str += '</div>';
                    str += '<div class="info-box">';
                    str += '    <span><strong>描述</strong></span>';
                    str += '    <span>'+ result[key].description +'</span>';
                    str += '</div>';
                    str += '<div class="info-box">';
                    str += '    <span><strong>动物种类</strong></span>';
                    str += '    <span>'+ result[key].subject +'</span>';
                    str += '</div>';
                    var str1 = '<img src="${path}/backstage/images/'+result[key].picUrl+'" alt="" height="500" />';
                    $('#img_pro').html(str1);
                    $('#detail-list').html(str);
                }
            }
        });

        //点击表示选中规格，带着数据跳转到订单页
        $("#confirm").click(function () {
            if(couponId == "") {
                var qData = {
                    uid:uid,
                    itemId:itemId,
                    insuredId:insuredId,
                    petId:petId,
                    buyerId:buyerId
                };
            } else {
                var qData = {
                    uid:uid,
                    itemId:itemId,
                    insuredId:insuredId,
                    petId:petId,
                    couponId:couponId,
                    buyerId:buyerId
                };
            }

            if(uid == "" || itemId == "" || insuredId == "" || petId == "" || buyerId == "") {
                alert("请选择购买商品所需的全部信息");
                return false;
            }
                $.ajax({
                    type: 'POST',
                    url: '/bill/insert',
                    dataType: "json",
                    data: qData,
                    error: function () {
                        console.log("失败");
                    },
                    success: function (result) {
                        var billID="";
                        console.log(result);
                        for(var key in result){
                            billID = result[key];
                        }
                        if(couponId != ""){
                            window.location.href = '${path}/shoppingcart?itemID='+ ${param.id} +'&billID='+ billID +'&couponID='+ couponId +'';
                        } else {
                            window.location.href = '${path}/shoppingcart?itemID='+ ${param.id} +'&billID='+ billID +'&couponID=0';
                        }
                    }
                });
//            }
        });
    });
</script>
<style>
    .insurance {
        float: left;
        margin-left: 4%;
        width: 20%;
    }
    .btn-allocate.btn-normal {
        border: 1px solid #ddd;
        color: #666;
    }
    .animal,
    .people {
        margin-right: 5px;
        margin-top: 1px;
    }

    #badge {
        padding: 2px 5px;  /* 不需要定义height与width，添加合适的padding使圆圈随字符长短变化而改变 */
        line-height: 20px;
        text-align: center;
        background-color: red;
        color: white;
        font-size: 12px;
        font-weight: 700;
        border-radius: 50%;
        /*position: relative;*/
        /*bottom: 45px;*/
        /*left: -20px;*/
    }

    #buy {
        display: none;
        border: 1px solid #EFEFEF;
        margin-left: 0px;
    }
    /*=======================================================*/
    .allocate_name {
        position: absolute;
        left: 0px;
        color: #999;
        width: 100px;
        text-align: right;
        padding-top: 5px;
    }
    .allocate_name {
        position: absolute;
        left: 0px;
        color: #999;
        width: 100px;
        text-align: right;
        padding-top: 5px;
    }
    .allocate_list {
        margin-left: 2%;
    }
    .btn-allocate.btn-normal {
        border-radius: 0px;
        border: 1px solid #ddd;
        color: #666;
    }
    .btn-allocate.btn-normal.active {
        color: #fff;
        background: #3D608F;
        border: 1px solid #3D608F;
    }
    .insurance {
        float: left;
        margin-left: 4%;
        text-align: left;
        line-height: 1;
        width: 20%;
    }
    .example {
        margin-left: 22%;
    }


    .btn_style {
        margin-right: 5px;
    }

    .shang {
        width: 100%;
        height: 75px;
        text-align: center;
        line-height: 66px;
        color: #a3a3a3;
        font-size: 16px;
        margin-top: 7px;
        margin-right: 2px;
    }

    .product .info {
        padding: 0;
    }

    .product .info .content h3 {
        padding-bottom: 0px;
    }

    .product .info .content h5 {
        padding-bottom: 0px;
    }

    .animal,
    .people {
        margin-right: 5px;
        margin-top: 1px;
    }
    #copy{
        padding: 2px;
        background-color: #3d608f;
        border-color: #3d608f;
        color:#FFFFFF;
        /*margin: 10px auto;*/
    }
    #buy_now,
    #btn_integral,
    #add_collection,
    #coupon{
        color: #3D608F !important;
        text-decoration:none !important;
        background: transparent;
        -webkit-transition: 0s;
        -o-transition: 0s;
        transition: 0s;
    }
    #addPET,
    #addRelaitve {
        background-color: #3d608f;
        border-color: #3d608f;
        color:#FFFFFF;
        margin-top: 2%;
    }
    #confirm {
        background-color: #3d608f;
        border-color: #3d608f;
        color:#FFFFFF;
        float:right;
        margin-top: 2%;
    }
    #myModal {
        margin-top: 2%;
    }
    #modal-body {
        padding-bottom: 0px;
    }
    #save {
        float:right;
    }
</style>

</html>